<template>
  <div class="input-card">
    <div class="close" v-if="closeable">
      <div class="close-icon-wrapper" @click="closeFn">
        <icon-close class="close-icon" />
      </div>
    </div>
    <div class="input-card-title" v-if="title || $slots.title">
      <slot name="title">{{ title }}</slot>
    </div>
    <a-divider style="margin: 0" />
    <div class="input-card-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup name="HolidayConfigInputCard">
  defineProps({
    closeable: {
      type: Boolean,
      default: false,
    },
    title: String,
  })
  const emit = defineEmits(['delete'])
  const closeFn = () => {
    emit('delete')
  }
</script>
<style lang="less" scoped>
  .input-card {
    width: 100%;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    position: relative;
    .input-card-title {
      padding: 16px;
      line-height: 22px;
      color: var(--color-text-1);
      font-weight: 600;
    }
    .input-card-content {
      padding: 16px;
    }
  }
  :deep(.form-item + .form-item) {
    margin-top: 16px;
  }
  .close-icon-wrapper {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 16px;
    background: #f2f2f2;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .close-icon {
    font-size: 12px;
  }
</style>
